<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>主页</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Serif+SC:200,300,400,500,600,700,900">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="https://cdn.staticfile.org/ionicons/2.0.1/css/ionicons.min.css">
    <link href="css/zzsc.css" rel="stylesheet">
    <link href="css/maps.css" rel="stylesheet">
    <link rel="stylesheet" href="./assets/style.css">
    <script type="text/javascript" src="js/maps.js"></script>
    <script type="text/javascript" src="js/google.js"></script>
</head>
<body>
<style>
    a:hover{ text-decoration:underline;color: #FF5907; }
</style>




<div id="app" >
    <ul   class="nav ">
        <li style="float: left;padding-left:320px " > <a style="font-size: 10px" href="#">会员权益</a></li>
        <li style="float: left;padding-left:10px " > <a style="font-size: 10px" href="#">文本比较</a></li>
        <li style="float: left;padding-left:10px " > <a style="font-size: 10px" href="#">在线代码</a></li>
        <li style="float: left;padding-left: 900px" ><a style="font-size: 10px" @click="location.href='./userUpdate.html'" >修改信息 </a>&nbsp;</li>
        <li style="float: left; padding-left: 10px" > <a style="font-size: 10px" href="#">| </a></li>
        <li style="float: left;padding-left: 10px" > <a style="font-size: 10px" @click="goOffline()">退出登录</a></li>
    </ul>
    <!-- 个人信息 -->
    <div class="self" style="position: fixed;right: 0px;bottom: 0px;width: 15%;height: 45%">
        <h3><div style="font-family: 'Arial'; font-weight: bold;">个人信息</div></h3>
        <div>
            <div class="selfLine"><span>姓名:</span>&nbsp;<span>{{users.name}}</span></div>
            <div class="selfLine"><span>个人省份:</span>&nbsp;<span>山东</span></div>
            <div class="selfLine"><span>科目组合:</span>&nbsp;<span>{{users.type}}</span></div>
            <div class="selfLine"><span>高考总分:</span>&nbsp;<span>{{users.score}}</span></div>
            <div class="selfLine"><span>全省排名:</span>&nbsp;<span>{{users.ranks}}</span></div>
        </div>


        <div class="selfLine"><a  style=" border-radius: 8px; width: 150px;font-family: 'Arial'; font-weight: bold;"
                                  href="recommend.html" >查询推荐志愿</a></div>
    </div>
    <!-- 固定导航栏 -->
    <div class="container">

        <div class="row nav upnav">
            <div class="col-lg-4"><h1><div style="font-family: 'Arial';">志愿填报网</div></h1></div>
            <div class="col lg-4"></div>
        </div>
        <div class="content" >
            <p style="display:none">Lorem ipsum dolor dit amet</p>
            <p style="display:none">Lorem ipsum dolor dit amet</p>
            <ul class="venus-menu">
                <p style="display:none">Lorem ipsum dolor dit amet</p>
                <li  ><a href="#"><i class="icon-home"></i> <a href="#" style="font-weight: bold; color: rgb(57, 83, 131);">
                    首页
                </a></a></li><p style="display:none">
                Lorem ipsum dolor dit amet</p>
                <p style="display:none">Lorem ipsum dolor dit amet</p>
                </li>
                <li><a href="#"><i class="icon ion-search"></i><a href="universities.html">
                    院校查找
                </a></a></li><p style="display:none">
                Lorem ipsum dolor dit amet</p>
                </li>
                <li><a href="#"><i class="icon ion-android-hand"></i> <a href="majors.html">
                    模拟填报
                </a></a>
                    <p style="display:none">Lorem ipsum dolor dit amet</p>
                </li>
                <p style="display:none">Lorem ipsum dolor dit amet</p>
                </li>
                <li><a href="#"><i class="icon ion-ios-star-half"></i><a href="recommend.html">
                    志愿推荐
                </a></a></li><p style="display:none">
                Lorem ipsum dolor dit amet</p>
                </li>
                <li><a href="#"><i class="icon ion-podium"></i><a href="ranking.html">
                    大学排行
                </a></a></li><p style="display:none">
                Lorem ipsum dolor dit amet</p>
                </li>
                <li><a href="#"><i class="icon ion-android-exit"></i><a href="http://localhost/" target="_blank" >
                    管理员入口
                </a></a></li><p style="display:none">
                Lorem ipsum dolor dit amet</p>
                </li>

                <p style="display:none">Lorem ipsum dolor dit amet</p>
                </li>
            </ul>
            <p style="display:none">Lorem ipsum dolor dit amet</p>
            <p style="display:none">Lorem ipsum dolor dit amet</p>
        </div>
    </div>
    <!-- banner -->
    <div class="banner">
        <div class="container-fluid" style="padding: 0%; height: 10% ; width: 62%">
            <img  src="./img/2.png" class="d-block w-100">
        </div>
    </div>


    <!-- 热门资讯 -->
    <div class="container tuiguang">
        <div><span class="yxtuijian">热门资讯</span><span class="rmzxr"><a href="#">查看更多>>></a></span></div>
        <div class="rmzx">
            <div class="tuiguang1">
                <span><img src="./img/tuijian1.jpg" class="tuijian"></span>
                <span class="rmzxleixing">高考资讯</span>
                <span><a href="https://www.gk100.com/read_27443.htm">山东理工类大学排名及其汇总2022高考参考</a></span>
                <span class="tuiDate">2021-10-11</span>
            </div>
            <div class="tuiguang1">
                <span><img src="./img/rmzx2.jpg" class="tuijian"></span>
                <span class="rmzxleixing">传媒资讯</span>
                <span><a href="https://www.gk100.com/read_27732.htm">中国传媒大学是一本还是二本？全国排名多少？</a></span>
                <span class="tuiDate">2021-10-9</span>
            </div>
            <div class="tuiguang1">
                <span><img src="./img/rmzu3.jpg" class="tuijian"></span>
                <span class="rmzxleixing">医药资讯</span>
                <span><a href="https://www.gk100.com/read_27730.htm">首都医科大学是一本还是二本？全国排名多少？</a></span>
                <span class="tuiDate">2021-10-11</span>
            </div>
            <div class="tuiguang1">
                <span><img src="./img/rmzx4.jpg" class="tuijian"></span>
                <span class="rmzxleixing">专业解读</span>
                <span><a href="https://www.gk100.com/read_25079.htm">女生谨慎报考的六大专业-建议女生学的专业</a></span>
                <span class="tuiDate">2021-10-8</span>
            </div>
        </div>

    </div>

    <!-- footer -->
    <div class="footer container">
        <div class="footertext">

            <div>联系电话: 123456789</div>
            <div>团队成员: 马秀坤 和理智 王贺 王乐斌 </div>
        </div>
    </div>
</div>

</body>
</html>

<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            users:{},
            showGroup:false,
            role:'',

        },
        methods:{
            goOffline(){
                const storage = window.localStorage;
                storage.setItem("online","off");
                storage.setItem("userid",'');
                storage.setItem("role","user")
                alert("登出成功, 点击进入登陆页面")
                location.href='login.html';
            },
            findUserById(id){
                axios.get("http://localhost:8080/users/getUsersById?id="+id).then((res)=>{
                    console.log(res.data)
                    this.users = res.data;
                });
            },
            getUsersRoleById(){
                //这个bug为什么突然好了?? 我改了哪里????
                axios.get("http://localhost:8080/users/getUsersRoleById?id="+window.localStorage.getItem("userid").toString())
                    //这个地方 我不知道为啥 如果参数是 this.users.id 那就是 undefined, 只能这样
                    .then((res)=>{
                        // console.log("返回值是 "+res.data)
                        // console.log(this.users)
                        if(res.data===1) {
                            // console.log("此处res.data===1")
                            this.role = "administrator";
                            // console.log("经过赋值 this.role 是 "+this.role.toString())
                        }else {this.role = "user";}
                        window.localStorage.setItem("role",this.role)
                    })
            },
            toAdmin(){
                if(window.localStorage.getItem("role") === 'administrator') location.href='admin/user.html';
                else alert("非管理员 无授权进入管理员界面!")
            }
        },
        created(){
            if(window.localStorage.getItem("online")!=="on"){
                window.location='login.html';
            }else {
                // console.log(window.localStorage.getItem("role").toString())
                // console.log(window.localStorage.getItem("userid").toString());
                this.findUserById(window.localStorage.getItem("userid").toString());
                this.getUsersRoleById();
                // console.log("用户角色是 "+window.localStorage.getItem("role"))
                // console.log("this.role 是 "+this.role.toString())
                this.showGroup = window.localStorage.getItem("role") === "administrator";
            }
        }
    })
</script>
